<%-- 
    Document   : test
    Created on : Mar 28, 2013, 1:44:30 PM
    Author     : NoiR
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<link href="css/test.css" type="text/css" rel="stylesheet"/>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript" src="js/commonjs.js"></script>
        <script type="text/javascript">
            var x,y;
            var heigth,cy;
            function test(){
                var url = "|Người ơi em mơ về anh đã bao ngày, một người yêu em và thương em.|Chờ anh em đã chờ lâu lắm biết không người em chờ là người cho em ngày bình yêu...| Ngày mai em là cô dâu mới, ngày mai em mặc chiếc áo dài, theo chồng |Ngày mai em cười thật hạnh phúc, ngày mai em được ở bên người mà em yêu | Ôi em thương anh, em yêu anh yêu vô bờ  | Ôi em mong anh, em nhớ anh đến từng giây  | Ngày mai cho em một tình yêu thật chân thành, thủy chung em chỉ cần như thế | Mỗi đêm vai anh là chiếc gối ấm êm dịu em vào bình yêu cho giấc ngủ em say  | Ngày mai em là cô dâu mới, ngày mai em mặc chiếc áo dài theo chồng | Ngày mai em cười thật hạnh phúc, ngày mai em được ở bên người mà em yêu  | Ôi em thương anh, em yêu anh yêu vô bờ | Ôi em mong anh, em nhớ anh đến từng giây....|Người ơi em mơ về anh đã bao ngày, một người yêu em và thương em.... |Từ đây 2 ta sẽ chung bước , đôi tim sẽ chung nhịp đi qua ngàn mưa giông...|Bình yêu trong ngôi nhà yêu thương....|";
                var sentences=seperateSentences(url);

                var out="";
                for(var i = 0;i<sentences.length;i++){
                    out+= "<p>"+sentences[i].trim()+"<p>";
                }
                text = document.getElementById("area");
                text.innerHTML = out;

                height = text.offsetHeight;
                cy = text.offsetTop;

                document.addEventListener("mousemove", getXY, false);
            }

            function getXY(e){
                x = e.clientX;
                y = e.clientY;
            }

            function movetext(param1){
                var newdiv = document.createElement('div');
                newdiv.setAttribute('id', param1);

                newdiv.style.width = 400;
                newdiv.style.height = 80;

                newdiv.style.position = "absolute";
                newdiv.style.left = x +"px";
                newdiv.style.top = y +"px";

                newdiv.className = "hoverPopup";

                //alert("x: "+newdiv.left+"y: "+y);
                border = Math.round((height/2) + cy);
                if(y<border){
                    newdiv.innerHTML = "bottom , speed: " + (y-border) ;
                }else{
                    newdiv.innerHTML = "top, speed: "+(y-border) ;
                }
                
                document.body.appendChild(newdiv);
            }

            function destroy(id) {
                document.body.removeChild(document.getElementById(id));
            }
        </script>
    </head>
    <body onload="test()">
        <h1>Hello World!</h1>
        <div id="testresult">
            <div id="textarea" onmouseover="movetext('12')" onmouseout="destroy('12')">
                <div id="area">

                </div>
            </div>
        </div>
    </body>
</html>
